<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 运动商城</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <style>
        .order-status {
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .order-status .status-icon {
            font-size: 24px;
            margin-right: 10px;
        }
        .order-items .product-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }
        .shipping-info {
            background-color: #fff;
            padding: 15px;
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <jsp:include page="common/header.jsp"/>
    
    <!-- 订单详情内容 -->
    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <!-- 订单状态 -->
                <div class="order-status">
                    <div class="d-flex align-items-center">
                        <c:choose>
                            <c:when test="${order.status == 10}">
                                <i class="fas fa-clock status-icon text-warning"></i>
                                <div>
                                    <h4 class="mb-1">等待付款</h4>
                                    <p class="mb-0 text-muted">请尽快完成支付，以免订单自动取消</p>
                                </div>
                            </c:when>
                            <c:when test="${order.status == 20}">
                                <i class="fas fa-check-circle status-icon text-success"></i>
                                <div>
                                    <h4 class="mb-1">已付款，等待发货</h4>
                                    <p class="mb-0 text-muted">商家正在处理您的订单</p>
                                </div>
                            </c:when>
                            <c:when test="${order.status == 30}">
                                <i class="fas fa-shipping-fast status-icon text-info"></i>
                                <div>
                                    <h4 class="mb-1">已发货</h4>
                                    <p class="mb-0 text-muted">商品正在配送中</p>
                                </div>
                            </c:when>
                            <c:when test="${order.status == 40}">
                                <i class="fas fa-check-double status-icon text-success"></i>
                                <div>
                                    <h4 class="mb-1">交易完成</h4>
                                    <p class="mb-0 text-muted">感谢您的购买</p>
                                </div>
                            </c:when>
                            <c:when test="${order.status == 50}">
                                <i class="fas fa-times-circle status-icon text-danger"></i>
                                <div>
                                    <h4 class="mb-1">交易关闭</h4>
                                    <p class="mb-0 text-muted">订单已取消</p>
                                </div>
                            </c:when>
                        </c:choose>
                    </div>
                </div>

                <!-- 订单信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">订单信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <p class="mb-1 text-muted">订单编号</p>
                                <p class="mb-3">${order.orderNo}</p>
                            </div>
                            <div class="col-md-3">
                                <p class="mb-1 text-muted">创建时间</p>
                                <p class="mb-3">
                                    <fmt:formatDate value="${order.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </p>
                            </div>
                            <div class="col-md-3">
                                <p class="mb-1 text-muted">支付方式</p>
                                <p class="mb-3">${order.paymentTypeDesc}</p>
                            </div>
                            <div class="col-md-3">
                                <p class="mb-1 text-muted">支付时间</p>
                                <p class="mb-3">
                                    <fmt:formatDate value="${order.paymentTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 收货信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">收货信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="shipping-info">
                            <h6 class="mb-3">${order.receiverName} ${order.receiverPhone}</h6>
                            <p class="mb-0">
                                ${order.receiverProvince} ${order.receiverCity} ${order.receiverDistrict}
                                ${order.receiverAddress}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 商品清单 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">商品清单</h5>
                    </div>
                    <div class="card-body">
                        <div class="order-items">
                            <c:forEach items="${order.orderItemVOList}" var="item">
                                <div class="d-flex align-items-center mb-3 p-3 border-bottom">
                                    <img src="${item.productImage}" alt="${item.productName}" class="product-img mr-3">
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1">${item.productName}</h6>
                                        <p class="mb-0 text-muted">
                                            单价：¥<fmt:formatNumber value="${item.currentUnitPrice}" pattern="#,##0.00"/>
                                            × ${item.quantity}
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <p class="mb-0 font-weight-bold">
                                            ¥<fmt:formatNumber value="${item.totalPrice}" pattern="#,##0.00"/>
                                        </p>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                        <div class="text-right mt-3">
                            <p class="mb-1">商品总额：¥<fmt:formatNumber value="${order.payment}" pattern="#,##0.00"/></p>
                            <p class="mb-1">运费：¥<fmt:formatNumber value="${order.postage}" pattern="#,##0.00"/></p>
                            <h5>实付款：¥<fmt:formatNumber value="${order.payment.add(order.postage)}" pattern="#,##0.00"/></h5>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="text-right">
                    <c:choose>
                        <c:when test="${order.status == 10}">
                            <button type="button" class="btn btn-danger" onclick="cancelOrder('${order.orderNo}')">取消订单</button>
                            <button type="button" class="btn btn-primary" onclick="payOrder('${order.orderNo}')">立即付款</button>
                        </c:when>
                        <c:when test="${order.status == 30}">
                            <button type="button" class="btn btn-success" onclick="confirmReceive('${order.orderNo}')">确认收货</button>
                        </c:when>
                    </c:choose>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <jsp:include page="common/footer.jsp"/>
    
    <!-- JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
    <script>
        function cancelOrder(orderNo) {
            if (confirm('确定要取消该订单吗？')) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/order/cancel',
                    type: 'POST',
                    data: {
                        orderNo: orderNo
                    },
                    success: function(response) {
                        if (response.status === 1) {
                            alert('订单已取消');
                            location.reload();
                        } else {
                            alert(response.msg || '取消订单失败');
                        }
                    }
                });
            }
        }

        function payOrder(orderNo) {
            // 这里可以跳转到支付页面或调用支付接口
            $.ajax({
                url: '${pageContext.request.contextPath}/order/pay',
                type: 'POST',
                data: {
                    orderNo: orderNo
                },
                success: function(response) {
                    if (response.status === 1) {
                        alert('支付成功');
                        location.reload();
                    } else {
                        alert(response.msg || '支付失败');
                    }
                }
            });
        }

        function confirmReceive(orderNo) {
            if (confirm('确认已收到商品吗？')) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/order/confirm',
                    type: 'POST',
                    data: {
                        orderNo: orderNo
                    },
                    success: function(response) {
                        if (response.status === 1) {
                            alert('确认收货成功');
                            location.reload();
                        } else {
                            alert(response.msg || '确认收货失败');
                        }
                    }
                });
            }
        }
    </script>
</body>
</html> 